<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="css/mui.min.css" rel="stylesheet" />
		<style type="text/css">
			[v-cloak] {
				display: none!important;
			}
			
			.mui-table-view-cell>a:not(.mui-btn) {
				white-space: inherit;
			}
		</style>
	</head>

	<body>
		<div class="mui-page" id="refreshContainer">
			<div class="mui-navbar-inner mui-bar mui-bar-nav">
				<a class="mui-left mui-action-back mui-btn  mui-btn-link mui-btn-nav mui-pull-left">
					<span class="mui-icon mui-icon-left-nav"></span>
				</a>
				<h1 class="mui-center mui-title">我的文件</h1>
			</div>
			<div class="mui-page-content" style="margin-top: 55px;">
				<ul class="mui-table-view" id="vm-files" v-cloak>
					<li v-if='files.length== 0' class="mui-table-view-cell">
						<a href="javascript:;" style="text-align: center; font-size: 14px; color: #ACACB4;">
							暂无文件
						</a>
					</li>
					<li v-else class="mui-table-view-cell" v-for="file in files">
						<a class="" v-on:click="open(file)">
							{{file.name}}
						</a>
					</li>
				</ul>
			</div>
		</div>
	</body>

</html>
<script type="text/javascript" src="js/mui.min.js"></script>
<script type="text/javascript" src="js/vue.min.js"></script>
<script type="text/javascript">
	mui.init({
		pullRefresh: {
			container: "#refreshContainer", //下拉刷新容器标识，querySelector能定位的css选择器均可，比如：id、.class等
			down: {
				style: 'circle', //必选，下拉刷新样式，目前支持原生5+ ‘circle’ 样式
				color: '#2BD009', //可选，默认“#2BD009” 下拉刷新控件颜色
				height: '50px', //可选,默认50px.下拉刷新控件的高度,
				range: '100px', //可选 默认100px,控件可下拉拖拽的范围
				offset: '0px', //可选 默认0px,下拉刷新控件的起始位置
				auto: false, //可选,默认false.首次加载自动上拉刷新一次
				callback: pullrefresh //必选，刷新函数，根据具体业务来编写，比如通过ajax从服务器获取新数据；
			}
		}
	});

	document.addEventListener("plusready", onPlusReady, false);

	function onPlusReady() {
		var waiting = plus.nativeUI.showWaiting('加载中...', {
			back: 'close'
		});
		
		//	请求本地文件系统对象
		plus.io.requestFileSystem(plus.io.PUBLIC_DOWNLOADS, function(fs) {
			var entry = fs.root;
			var reader = entry.createReader();
			
			//	获取当前目录中的所有文件和子目录
			reader.readEntries(function(es) {
				var files = new Array();
				mui(es).each(function() {
					files.push({
						name: this.name,
						filepath: this.fullPath
					});
				});
				render(files);
				waiting.close();
			}, function(e) {
				console.log('文件加载失败 ' + e.message);
			});
		}, function(e) {
			console.log("Request file system failed: " + e.message);
		});

		var render = function(files) {
			filesVue = new Vue({
				el: '#vm-files',
				data: {
					files: files
				},
				methods: {
					open: function(file) {
						var filepath = file.filepath;
						var nfilepath = plus.io.convertAbsoluteFileSystem(filepath);//针对ios转化为本机绝对路径
						mui.confirm('打开文件？', '温馨提示', '', function(e) {
							if(e.index == 1) {
								switch(plus.os.name) {
									case 'Android':
										plus.runtime.openFile(nfilepath);
										break;
									default:
										console.log('IOS');
										plus.runtime.openFile(nfilepath, {}, function(e) {
											plus.nativeUI.alert("温馨提示：" + e.message);
										});
										break;
								}
							}
						}, 'div');
					}
				}
			});
		}
	}

	//	var filesVue;

	//	下拉刷新功能
	function pullrefresh() {
		location.reload();
		setTimeout(function() {
			mui('#refreshContainer').pullRefresh().endPulldown();
		}, 1000);
	}
</script>